Cypress Automation Test Framework with Cucumber and TypeScript

In this article, I’d like to introduce a workable Cypress framework which can be used in real project. TypeScript is widely used in large scale Cypress project nowadays, and it is supported by latest Cypress out of box already. Cucumber is for Behavior Driven Development(BDD) purpose as I introducd in another blog.

Dependency Management

In a real project, we don’t install the dependencies one by one like “npm install –save-dev typescript” as introduced in those simple tutorials. To follow the practice how Node.js managing the dependencies, we use put following dependecies in package.json file

"dependencies": {
    "@testing-library/cypress": "^7.0.6",
    "@types/cypress-cucumber-preprocessor": "^4.0.0",
    "@types/node": "^15.12.4",
    "cypress": "^7.5.0",
    "cypress-cucumber-preprocessor": "^4.1.2",
    "typescript": "^4.3.3"
  },

## Cypress Configuration ## Add following into the plugin cypress/plugins/index.js

    const browserify = require('@cypress/browserify-preprocessor');
    const cucumber = require('cypress-cucumber-preprocessor').default;
    const resolve = require('resolve');

    module.exports = (on, config) => {
    const options = {
        ...browserify.defaultOptions,
        typescript: resolve.sync('typescript', { baseDir: config.projectRoot }),
    };

    on('file:preprocessor', cucumber(options));
    };

In cypress.json, add:

    {
    "testFiles": "**/*.feature",
    }

## feature file ## By default, put your feature file under cypress/integration folder. This location is configurable, but I don’t suggest to change the location if you just start with Cypress. Under cypress/integration, create a folder with the same name with your feature file, and put your test steps implementation files under this folder. Like following.

In a real project, there are some test steps can be reused by various test cases. That means different feature files or different scenarios in a same feature file have same step. Like following step “Given I open Google page” will be reused for many kinds of tests if they need to login at first.

    Feature: Login Google

  
    @smoking
    Scenario: Opening a search engine page
        Given I open Google page
        Then I see "Google" in the title

If you have used cucumber with Java or other language, you must remmeber hooks. Here we can put such hooks under cypress/integration/common folder. For the above feature file, we can put a file google_login_step.ts under cypress/integration/common folder. Then this step can be reused by any feature file which has the sentence “Given I open Google page”.

## how to share variable between steps ## Very often, in a step, we need to use a variable value from another step. If you are familiar with JAVA+cucumber, this is not a problem. But we cannot follow the same approach in JavaScript/TypeScript for the asynchronous feature I mentioned in previopus blogCypress Automation Test Overview. Typically here we can use alias. For example, in one step, we have following:

    cy.get('button').invoke('text').as('text')

In another step, we can get the value of previous text like:

    expect(cy.get('@text')).to.have.text('Register success!')

There are still more interesting features like how to use environment variable, how to design plugins cannot be covered here. I will add these in next Cypress blog.

Back To Homepage
Cypress Automation Test Overview